<template>
  <div class="user-box">
    <div class="select-u">
      <div class="ensure" v-if="isEnsure">
        <el-button type="ensure" style="margin-left: 15px" @click="recoverAll"
          >确定
        </el-button>
        <el-button type="info" style="margin-left: 15px" @click="cancel()"
          >取消
        </el-button>
      </div>
      <div class="butts" v-else>
        <el-button
          type="info"
          icon="icon-tianjiayonghu iconfont"
          style="margin-left: 15px"
          @click="createUser"
          >创建用户
        </el-button>
        <el-button
          type="info"
          icon="icon-jinyong1 iconfont"
          style="margin-left: 15px"
          @click="disableAll"
          >批量禁用
        </el-button>
        <el-button
          type="info"
          icon="icon-huifudaoyishanchu iconfont"
          style="margin-left: 15px"
          @click="recoverAll"
          >批量恢复
        </el-button>
        <el-button
          type="info"
          style="margin-left: 15px"
          icon="el-icon-delete"
          @click="deleteAll"
          >批量删除
        </el-button>
      </div>
      <div class="searchInp">
        <el-input placeholder="请输入查询关键字" v-model="input"> </el-input>
        <el-button class="but" type="goon" icon="el-icon-search"></el-button>
      </div>
    </div>
    <!-- 列表 -->
    <div class="table" v-if="tableData.length > 0">
      <el-table :data="tableData">
        <el-table-column width="80" align="center" header-align="center">
          <template slot="header" v-if="!isCheck">
            <el-checkbox></el-checkbox>
          </template>
          <template v-if="!isCheck">
            <el-checkbox></el-checkbox>
          </template>
        </el-table-column>
        <!-- <el-table-column
          type="selection"
          width="80"
          :class-name="isCheck ? 'checkboxHidden' : 'checkboxShow'"
          align="center"
        >
        </el-table-column> -->
        <!-- :selectable="checkboxT" -->

        <el-table-column
          prop="name"
          :label="username"
          min-width="280"
          align="center"
        >
          <template slot="header">
            <span v-if="username == '用户名称'">{{ username }}</span>
            <span v-else>{{ username }}(0/1)</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          :label="createtime"
          min-width="200"
          align="center"
          header-align="center"
        >
          <template slot="header">
            <span>{{ createtime }}</span>
            <!-- <i
              v-if="createtime"
              class="iconfont icon-xiajiantou"
              style="font-size: 20px; margin-left: 5px"
            ></i> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="currentstatus"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          :label="privilege"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" :label="operation" width="250" align="center">
          <el-button
            v-on:click.native.prevent="detail()"
            size="small"
            icon="iconfont icon-yulan"
            type="iDetial"
          >
          </el-button>
          <el-button
            v-on:click.native.prevent="detail()"
            size="small"
            icon="iconfont icon-bianji"
            type="iEdit"
          >
          </el-button>
          <!-- 这里template -->
          <el-button
            v-if="isForBiden"
            v-on:click.native.prevent="huifu()"
            size="small"
            class="iconfont"
            :class="isForBiden ? ' icon-ban' : 'icon-huifu'"
            :style="{ color: isForBiden ? '#e41212' : '#fff' }"
            type="iDelete"
          >
          </el-button>
          <el-button
            v-on:click.native.prevent="detail()"
            size="small"
            icon="iconfont icon-shanchu"
            type="iDelete"
          >
          </el-button>
        </el-table-column>
      </el-table>
    </div>
    <!-- 空 -->
    <div class="nodataDiv" v-else>
      <div>
        <div class="nodata"></div>
        <div class="nodataText">暂无内容</div>
      </div>
    </div>
    <!-- 创建用户弹框 -->
    <el-dialog
      title="创建用户"
      :visible.sync="userShow"
      width="68%"
      top="12vh"
      :closeOnClickModal="false"
      @close="closeDialog"
      custom-class="userDialog"
    >
      <el-form :model="userInfo" :rules="rules" ref="ruleForm" class="user-box">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="系统用户"
              prop="account"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="userInfo.account"
                autocomplete="off"
                placeholder="请输入登录账户"
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="真实姓名"
              prop="name"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="userInfo.name"
                autocomplete="off"
                placeholder="请输入真实姓名"
                maxlength="5"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="手机号码"
              :label-width="formLabelWidth"
              prop="mobile"
            >
              <el-input
                v-model="userInfo.mobile"
                autocomplete="off"
                placeholder="请输入手机号码"
                maxlength="5"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="系统权限"
              :label-width="formLabelWidth"
              prop="sysControl"
            >
              <el-select
                v-model="userInfo.sysControl"
                placeholder="请选择权限"
                :popper-append-to-body="false"
              >
                <el-option label="管理员" value="1"></el-option>
                <el-option label="普通用户" value="2"></el-option>
                <el-option label="安全审计员" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="登录密码"
              prop="account"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="userInfo.password"
                autocomplete="off"
                placeholder="请输入密码"
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="确认密码"
              prop="ensurePassword"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="userInfo.ensurePassword"
                autocomplete="off"
                placeholder="请再次输入密码"
                maxlength="5"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="审核权限"
              :label-width="formLabelWidth"
              prop="audit"
            >
              <el-select
                v-model="userInfo.audit"
                placeholder="请选择权限"
                :popper-append-to-body="false"
              >
                <el-option label="禁用" value="1"></el-option>
                <el-option label="启用" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="系统权限"
              :label-width="formLabelWidth"
              prop="sysAudit"
            >
              <el-select
                v-model="userInfo.sysAudit"
                placeholder="请选择权限"
                :popper-append-to-body="false"
              >
                <el-option label="禁用" value="1"></el-option>
                <el-option label="启用" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="职位信息"
              prop="positionInfo"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="userInfo.positionInfo"
                autocomplete="off"
                maxlength="50"
                class="inp"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="联系地址"
              prop="address"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="userInfo.address"
                autocomplete="off"
                maxlength="50"
                class="inp"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="备注信息"
              prop="mark"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="userInfo.mark"
                autocomplete="off"
                maxlength="500"
                class="inp"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                resize="none"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="saveUser('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { personPhone } from "@/utils/validator";
import "@/assets/css/personalResources.less";
export default {
  name: "UserManagement", //用户管理
  data() {
    return {
      input: "",
      userShow: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          status: "在线",
          address: "上海市普陀",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          status: "在线",
          address: "上海市普",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          status: "在线",
          address: "上海市普陀",
        },
      ], //列表数据
      userInfo: {
        account: "", //系统用户
        name: "", //真实姓名
        mobile: "", //手机号码
        sysControl: "1", //系统权限
        password: "", //密码
        ensurePassword: "", //确认密码
        audit: "1", //审核权限
        sysAudit: "2", //系统权限
        positionInfo: "", //职位信息
        address: "", //地址
        mark: "", //备注信息
      },
      formLabelWidth: "140",
      username: "用户名称",
      createtime: "创建时间",
      currentstatus: "当前状态",
      privilege: "系统权限",
      operation: "操作",

      rules: {
        account: [
          {
            required: true,
            message: "系统用户不能为空",
            trigger: "change",
          },
        ],
        mobile: {
          required: true,
          validator: personPhone,
          trigger: "blur",
        },
        password: [
          {
            required: true,
            message: "登录密码不能为空",
            trigger: "change",
          },
        ],
        ensurePassword: [
          {
            required: true,
            message: "登录密码不能为空",
            trigger: "change",
          },
        ],
        name: [
          {
            required: false,
            message: "系统用户不能为空",
            trigger: "change",
          },
        ],
      },
      isEnsure: false,
      isCheck: true,
      isForBiden: true,//
    };
  },
  methods: {
    // 列表详情
    detail() {},
    // 创建用户
    createUser() {
      this.userShow = true;
    },
    // 保存用户
    saveUser() {
      this.userShow = false;
    },
    // 清除验证
    closeDialog() {
      this.$refs.ruleForm.resetFields();
    },
    // 批量禁用
    disableAll() {},
    //批量恢复
    recoverAll() {},
    //批量删除
    deleteAll() {
      this.isEnsure = true;
      this.isCheck = false;
      this.titleReset();
    },
    cancel() {
      this.isEnsure = false;
      this.isCheck = true;
      this.backReset();
    },
    // 还原表头
    backReset() {
      this.username = "用户名称";
      this.createtime = "创建时间";
      this.currentstatus = "当前状态";
      this.privilege = "系统权限";
      this.operation = "操作";
    },
    // 重置表头
    titleReset() {
      this.username = "全选";
      this.createtime = "";
      this.currentstatus = "";
      this.privilege = "";
      this.operation = "";
    },
    // 复选框
    // checkboxT(row, rowIndex) {
    //   if (rowIndex == 0) {
    //     //      if(row.lie =='1'){
    //     return false; //禁用
    //   } else {
    //     return true; //不禁用
    //   }
    // },
    huifu(type) {
      if (type == 1) {
        this.hui = true;
        console.log(type);
      } else if (type == 2) {
        console.log(type, "222");
        this.hui = false;
      } else {
        return;
      }
    },
  },
};
</script>
<style lang="less">
.select-u {
  .el-input__inner {
    border-radius: 0;
    height: 30px;
    line-height: 30px;
  }
  .el-input__suffix {
    top: 0;
    right: 5px;
  }
  .el-button--goon {
    margin-top: 0;
    height: 0.4rem;
    width: 0.4rem;
  }
  .iconfont {
    margin-right: 5px;
    font-weight: bold;
  }
  .el-button--ensure {
    background-color: #f15151;
    color: #fff;
    border: none;
    width: 100px;
    padding: 0 10px;
    &:hover,
    &:focus {
      background-color: #4e5a7a;
      border-color: #4e5a7a;
    }
  }
}
.userDialog {
  .user-box {
    .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      margin-right: 0;
    }
    .el-input {
      width: 300px;
      .el-input__suffix {
        right: 5%;
      }
    }
    .inp {
      width: 89% !important;
    }
  }
}
.table {
  .el-table th {
    height: 50px !important;
  }
  .el-button {
    padding: 0 5px;
  }
  .el-checkbox__inner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border-color: #4a69a4;
    background-color: #162448;
    border-width: 2px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #4a69a4;
    border-color: #4a69a4;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #4a69a4;
  }
  .el-checkbox__inner::after {
    border-width: 2px;
    height: 9px;
    left: 6px;
    border-color: #162448;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
    top: 7px;
    background-color: #162448;
    height: 3px;
  }
}
.checkboxHidden {
  visibility: hidden;
}
.checkboxShow {
  visibility: visible;
}
</style>
<style lang='less' scoped>
.user-box {
  height: 100%;
  .select-u {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row-reverse;
    .ensure,
    .butts {
      display: inline-block;
    }
    .searchInp {
      width: 250px;
      display: flex;
      .but {
        align-self: flex-start;
      }
    }
  }
  .userDialog {
    .user-box {
      width: 800px;
      margin: 0 auto;
      .el-row {
        margin-bottom: 20px;
      }
    }
  }
  // 表格
  .table {
    .el-button--iDelete,
    .el-button--iEdit,
    .el-button--iHuifu,
    .el-button--iDetial {
      background: transparent;
      border-color: transparent;
    }
    .el-button--iDetial {
      color: #3cebbc;
    }
    .el-button--iEdit {
      color: #4335c6;
    }
    .el-button--iDelete {
      color: #e41212;
    }
    .el-button--iHuifu {
      color: #fff;
    }
  }
}
</style>
